<!--
 * @Description: 折线图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:28:41
-->
<template>
  <div>
    <!-- 2.创建容器 -->
    <div ref="container" style="height:250px;"></div>
  </div>
</template>

<script>
// 1.引入堆叠面积图
import { Area } from '@antv/g2plot';
//1.1引入get 发送请求
import {get} from '@/utils/request';
//1.2映入momentjs 对事件进行转化
let moment = require('moment');
export default {
  data() {
    return {
      //存放返回大气信息
      weatherData:[],
    };
  },
  methods: {
    moment,
    //3.创建实例
    loadCharts(){
      //3.创建图标实例
      const area = new Area(this.$refs.container,{
        data:this.weatherData,  
        xField: 'date',
        yField: 'value',
        seriesField: 'type',
        xAxis:{
              tickCount: 20,
              seriesField:{
              tickInterval:20,
              },
              label:{
              style:{
                fill:'white',
                fontSize:5
              }  
            }
           },
        yAxis:{
              tickCount: 5,
              label:{
              style:{
                fill:'white',
                fontSize:16
              }  
            }
           },
      });
      //4.渲染页面
      area.render();
    },
    //2.1发送get请求
    async getWeatherData(){
      let res = await get('/dashboard/queryMouthData',{
        page:1,
        pageSize:10,
        engineer_id:4,
        device_id:5
      });
      console.log(res,"天气反馈");
      res.data.forEach((item,index,arr)=>{
        // (需要修改时间)（修改后的格式）
      });
      //4.1将修改后的数据放入接受数组中
      this.weatherData=res.data;
      //5.1在数据接受成功后再渲染图表
      this.loadCharts();
    } 

  },
  created() {},
  computed: {},
  mounted() {
    //this.loadCharts();

    this.getWeatherData();
  },
};
</script>
<style scoped>
</style>